<template>
  <el-container>
    <el-main>
      <el-dialog
        v-if="awardDetailData"
        :title="awardDetailData.name"
        :visible.sync="awardDetailVisiable"
        width="100%"
        style="height: 100%"
        @close="handleAwardDetailDialogClose"
      >
        <span>
          <span style="font-weight: 700">no：{{ awardDetailData.no }}</span>
          <div class="mask">
            <el-row :gutter="30">
              <el-col :span="8" :offset="0">
                <el-card>
                  <div class="sliderMask">
                    <div class="sliderContent">
                      <div>
                        第一完成人：
                        <span>{{ awardDetailData.awardee.split(",")[0] }}</span>
                      </div>
                      <div>
                        第一完成人类型：
                        <span>{{ awardDetailData.first_awardee_type }}</span>
                      </div>
                      <div>
                        完成人单位:
                        <span>{{ awardDetailData.awardee_unit }}</span>
                      </div>
                      <div>
                        获奖级别:
                        <span>{{ awardDetailData.award_category }}</span>
                      </div>
                      <div>
                        获奖等级:
                        <span>{{ awardDetailData.award_level }}</span>
                      </div>
                      <div>
                        学科门类:
                        <span>{{
                          awardDetailData.subject_classification
                        }}</span>
                      </div>
                      <div>
                        获奖事件:
                        <span>{{ awardDetailData.award_time }}</span>
                      </div>
                      <div>
                        通过状态：
                        <span>
                          <span v-if="awardDetailData.status == 1">已通过</span>
                          <span v-else-if="awardDetailData.status == 0"
                            >未通过</span
                          ></span
                        >
                      </div>
                    </div>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="16" :offset="0">
                <el-card width="90%">
                  <div class="contentMask">
                    <div>
                      <h3>{{ awardDetailData.name }}</h3>
                    </div>
                    <div>
                      下达获奖单位：
                      <span>{{ awardDetailData.release_unit }}</span>
                    </div>
                    <div>
                      获奖人数：
                      <span>{{ awardDetailData.awardee_num }}</span>
                    </div>
                    <div>
                      附件：
                      <el-link
                        type="primary"
                        :underline="false"
                        :href="`http://localhost:3000/${awardDetailData.awardfile}`"
                        target="_blank"
                      >
                        <span class="file">{{
                          this.awardfileArr[this.awardfileArr.length - 1]
                        }}</span>
                      </el-link>
                    </div>
                  </div>
                </el-card>
                <el-card width="90%">
                  <div class="footMask">
                    <div>
                      成果形式：
                      <span>{{ awardDetailData.achievement_type }}</span>
                    </div>
                    <div>
                      项目来源：
                      <span>{{ awardDetailData.project_source }}</span>
                    </div>
                    <div>
                      发证单位：
                      <span>{{ awardDetailData.award_unit }}</span>
                    </div>
                    <div>
                      其他完成人：
                      <span>{{
                        awardDetailData.awardee.split(",").slice(1).join("")
                      }}</span>
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </span>
      </el-dialog>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: "myAwardDetail",
  data() {
    return {
      awardDetailVisiable: false,
      awardDetailData: "",
      awardfileArr: "",
    };
  },
  methods: {
    handleAwardDetailDialogClose() {
      this.awardDetailVisiable = false;
    },
    awardDetailShow(data) {
      // console.log(data);
      this.awardDetailVisiable = true;
      this.awardDetailData = data;
      this.awardfileArr = this.awardDetailData.awardfile.split("/");
    },
  },
  mounted() {
    this.$bus.$on("handleAwardDetailShow", this.awardDetailShow);
  },
  beforeDestroy() {
    this.$bus.$off("handleAwardDetailShow");
  },
};
</script>

<style lang="less" scoped >
// awardFileImg
.awardFileImg {
  width: 800px;
  height: 600px;
  background-size: cover;
}

// 样式设计
/deep/.el-row {
  margin-right: 0px !important;
}

/deep/.el-dialog__body {
  box-sizing: border-box;
  padding: 30px 20px;
  padding-top: 0px;
}
// 关闭图表
/deep/.el-dialog__headerbtn .el-dialog__close {
  color: black;
  font-size: 24px;
}
/deep/.el-dialog {
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}
.mask {
  overflow: hidden;
  width: 100%;
  height: 0vh;
  animation: maskAni 1s forwards;
  transition: all 1s;
}
@keyframes maskAni {
  100% {
    height: 84vh;
  }
}
//
.sliderMask {
  height: 78vh;
}
// slider
.sliderContent {
  // display: flex;
  // flex-direction: column;
  font-size: 18px;
  div {
    margin-bottom: 24px;
    // border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  }
}
.contentMask {
  height: 55vh;
  div {
    font-size: 16px;
    p {
      text-indent: 2em;
      margin-bottom: 20px;
    }
    margin-bottom: 10px;
  }
  .file {
    color: red;
    cursor: pointer;
  }
}
.footMask {
  height: 17.5vh;
  font-size: 18px;
  div {
    margin-bottom: 24px;
    // border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  }
}
</style>